<template>
  <div id="app">
    <div class="inputtext">
      <input
        :type="type"
        :placeholder="textplaceholder"
        v-model="inputVal"
        :class="{errorr:!isValid}"
        @blur="show"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ["textplaceholder", "type", "rule", "err_message"],
  data() {
    return {
      inputVal: "",
      isValid: true
    };
  },
  watch: {
    inputVal(newVal) {
      const regs = new RegExp(this.rule);
      const errMsg = this.err_message;
      this.isValid = regs.test(newVal);
      if (!this.isValid) {
        console.log(errMsg);
      }
      //发生改变时通知父组件
      this.$emit("valnewVal", newVal);
    }
  },
  methods: {
    show() {
      if (!this.isValid) {
        console.log(this.errMsg);
        this.$toast.fail(this.err_message);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.inputtext,
.inputpassword {
  text-align: center;
  margin-bottom: 11.111vw;
  input {
    border: none;
    border-bottom: 1px solid #3333;
    width: 83.333vw;
    font-size: 5.556vw;
    color: mediumvioletred;
  }
}

.inputtext {
  .errorr {
    border-bottom: 1px solid red;
  }
}
</style>